<template>
	<view class="CommodityUnit por">
		<u-skeleton avatar avatarSize="200rpx" avatarShape="square" :rows="4"
			:rowsWidth="['342rpx','108rpx','168rpx','76rpx']" :rowsHeight="['32rpx','24rpx','24rpx','28rpx']"
			:loading="loading" :title="false">
			<view class="commodity-unit">
				<u-image :src="item.goodsUrl" width="200rpx" height="200rpx" radius="20rpx">
					<view slot="error" style="font-size: 24rpx;">加载失败</view>
				</u-image>
				<view class="between">
					<view class="dis-cen">
						<view class="box font-weight-600 color3 size-34">{{item.goodsName || ''}}</view>
						<text class="color9 size-28">销量：{{item.goodsSales || 0}}</text>
					</view>
					<view class="color9 size-28">库存：{{item.stock || 0}}</view>
					<view class="color9 size-28">限购：{{!item.isRestrictions*1 ? '不限购' : '限购'}}</view>
					<view class="color size-28 font-weight-600">
						¥<text class="size-40">{{item.goodsAmount || 0}}</text>
					</view>
				</view>
			</view>
		</u-skeleton>
	</view>
</template>

<script>
	export default {
		props: {
			loading: {
				type: Boolean,
				default: true
			},
			item: {
				type: Object,
				default: {}
			}
		},
		data() {
			return {

			}
		},
		methods: {

		}
	}
</script>

<style lang="scss">
	.CommodityUnit {

		// .colonel {
		.commodity-unit {
			display: grid;
			grid-template-columns: 200rpx 1fr;
			box-sizing: border-box;
			grid-gap: 20rpx;
		}
		.between{
			width: calc(100vw - 320rpx);
			.box {
				width: 70%;
			}
		}
	}
</style>